<template>
	<view>
		<view class="cu-custom" :style="[{height:(CustomBar+StatusBar)+ 'px'}, {lineHeight:(CustomBar+StatusBar)+ 'px'}]">
			<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
				<view class="action click-active" @tap="BackPage" v-if="isBack">
					<view class="action-back-line">
						
					</view>
					<view class="icon-back" :style="{ backgroundImage: 'url(/static/images/arrow-right.png)', backgroundSize: 'cover' }">
						
					</view>
					<slot name="backText"></slot>
				</view>
				<view class="content" :style="[{top:StatusBar + 'px', left: isBack?'60rpx':''}]">
					<slot name="content"></slot>
				</view>
				<view class="cai-f-base cu-right click-active">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: 60,
			};
		},
		name: 'cu-custom',
		computed: {
			style() {
				var StatusBar= this.StatusBar;
				var CustomBar= this.CustomBar;
				var bgImage = this.bgImage;
				var style = `height:${CustomBar+StatusBar}px;padding-top:${StatusBar}px;`;
				if (this.bgImage) {
					style = `${style}background-image:url(${bgImage});`;
				}
				return style
			}
		},
		props: {
			bgColor: {
				type: String,
				default: ''
			},
			isBack: {
				type: [Boolean, String],
				default: false
			},
			bgImage: {
				type: String,
				default: ''
			},
			backUrl: {
				type: String,
				default: ''
			},
			urlType: {
				type: String,
				default: 'navigateTo'
			},
			isHasBack: {
				type: [Boolean],
				default: false
			}
		},
		methods: {
			BackPage() {
				if(this.backUrl){
					this.utils.routeTo(this.urlType, this.backUrl)
				}else if(this.isHasBack){
					this.$emit('BackPage')
				}else{
					uni.navigateBack({
						delta: 1
					});
				}
			}
		},
		onShow() {

		}
	}
</script>

<style lang="scss">
.cu-bar .action{
	width: 90rpx;
	position: relative;
}
.cu-bar .action .cuIcon-back_android{
	font-size: 54rpx;
	font-weight: bold;
}
.cu-bar .action:first-child{
	margin-left: 0;
}

.action-back-line{
	width: 30rpx;
	height: 60px;
}
.icon-back{
	width: 42rpx;
	height: 42rpx;
	vertical-align: middle;
	position: absolute;
	top: 50%;
	margin-top: -21rpx;
	left: 30rpx;
}
.content{
	text-align: left;
	padding-left: ($padding-base);
	font-weight: bold;
}
.cu-custom{
	box-sizing: content-box;
	height: 60px;
	line-height: 60px;
}
.cu-custom .cu-bar .content{
	width: auto;
}
.cu-bar{
	background-color: #f2f2f2;
}
.cu-bar .content{
	text-align: left;
	font-size: ($font-size-lg);
}
.cu-right{
	padding-right: ($padding-base);
}

</style>
